<template>
	<div>
		<!-- 头部 -->
		<div class="return-home">
			<router-link to="/home">
				<p class="return-text">
					<van-icon name="arrow-left" />返回
				</p>
			</router-link>
			<p class="bufan">不凡</p>
		</div>
		<!-- 瀑布流部分 -->
		<van-list
		  v-model="loading"
		  :finished="finished"
		  finished-text="没有更多了"
		  @load="onLoad"
		  :immediate-check="false"
		>
		<div v-for="item in list" :key="item.id">
			<div class="brand-img">
				<img :src="item.app_list_pic_url" alt="" style="width: 100%; display: block;">
				<div class="brand-textbox">
					<p class="brand-text1">{{item.name}}</p>
					<!-- <span class="brand-text2"></span> -->
					<p class="brand-text3">{{item.floor_price}}起</p>
					</div>
			</div>
			
			
		</div>
		</van-list>
		
		<!-- 尾部标签 -->
	</div>
</template>

<script>
	import {
		listaction
	} from "../../../api/home/brand/index.js"
	export default{
		data(){
			return{
				index:[],
				 list: [],
				      loading: false,
				      finished: false,
					  page:1,
					  total:0
			}
		},
		created(){
			this.init()
		},
		methods:{
			async init(){
				var res = await listaction({
					page:this.page
				})
				console.log(res)
				this.list.push(...res.data.data);
				this.page = this.page+1;	
				this.total = res.data.total;
				this.loading = false
				
			},
			onLoad(){
				if(this.total < this.page){
					this.finished = true
					 return
				}
			    this.init()
			    },
		}
		
	}
</script>

<style scoped lang="scss">
	@import "../scss/index.scss";
	// 头部
		.return-home {
			display: flex;
			font-size: 16px;
			margin-left: 20px;
	
			.return-text {
				color: blue;
			}
	
			.bufan {
				margin-left: 60px;
			}
		}
		//瀑布流部分
		.brand-img{
			position: relative;
		}
		.brand-textbox{
			   position: absolute;
			  top: 30%;
			  left: 20%;
			display: flex;
			font-size: 20px;
			color: #FFFFFF;
			font-weight: 700;
			text-align: center;
			.brand-text1{
				text-align: center;
			}
			.brand-text3{
				margin-left: 10px;
				text-align: center;
			}
			.brand-text2{
				width: 3px;
				height: 18px;
				display: block;
				background-color: #FFF7CC;
				 position: absolute;
				 top: 25px;	
				 left: 65%;
				  // margin: 0 10px;
			}
		}
</style>
